<template>
  <div class="app-container">
    <el-row>
      <el-col :span="8">
        <el-tree
          ref="accessResourceTree"
          v-loading="loading"
          :data="mBeans"
          :expand-on-click-node="false"
          :highlight-current="true"
          :props="{label: 'label'}"
          @node-click="clickNode"
        >
          <div slot-scope="{ node, data }" class="custom-tree-node">
            {{ data.label }}
          </div>
        </el-tree>
      </el-col>

      <el-col :span="16">
        <template v-if="choseNode">
          <mbeaninfo v-if="choseNode.nodeType === 'MBEAN'" ref="MBEAN" :name-info="choseNode" :conn-name="connName" />
          <list-child-mbean v-if="choseNode.nodeType === 'FOLDER'" ref="FOLDER" :name-info="choseNode" />
        </template>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import jvm from '@/api/jvm'

import mbeaninfo from '@/views/monitor/jvm/mbeanview/mbeaninfo'
import listChildMbean from '@/views/monitor/jvm/mbeanview/listChildMbean'

export default {
  name: 'Mbean',
  components: { mbeaninfo, listChildMbean },
  props: {
    connName: {
      type: String
    }
  },
  data() {
    return {
      loading: false,
      mBeans: [],
      choseNode: null
    }
  },
  mounted() {

  },
  methods: {
    init() {
      this.refreshMBeans()
    },
    refreshMBeans() {
      this.loading = true
      jvm.names(this.connName).then(res => {
        this.loading = false
        this.mBeans = res.data
      })
    },
    clickNode(data, node, el) {
      this.choseNode = data
      this.$nextTick(() => {
        if (this.$refs[data.nodeType]) {
          this.$refs[data.nodeType].init()
        } else {
          console.log(data.nodeType + '不支持预览')
        }
      })
    }
  }
}
</script>


